<template>
    <div class="top_bar">
        <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
        <div class="search">
            <el-input v-model="search_input" placeholder="热门商品" :prefix-icon="Search" />
            <div class="search_btn">
                <v-btn style="color: white;" class="search_btn_v" :ripple="false" height="4vh" min-width="10vh">
                    搜索
                </v-btn>
            </div>
        </div>
    </div>
    <div class="select_bar">
        <v-btn href="/user" variant="text">首页</v-btn>
    </div>
    <div class="body">
        <div class="room_info">
            <el-image style="width: 15vh;height: 15vh;margin: auto;margin-left: 1vh;padding: 1vh;"
                src="https://bu.dusays.com/2024/09/24/66f201fff4183.jpg"></el-image>
            <div class="farm_card">
                <div class="card_left">
                    <span>{{ room_info.roomName }}</span>
                    <div class="card_tags" style="display: flex; gap: 1vh;">
                        <el-tag style="margin: 0;" effect="dark">实力商家</el-tag>
                        <el-tag style="margin: 0;" effect="dark">实力商家</el-tag>
                    </div>
                </div>
                <div class="card_right">
                    <div class="right_1">
                        <div style="color: #ffffff;" class="rating">商铺评分</div>
                        <span>{{ room_info.roomRating }}</span>
                    </div>
                    <div class="right_2">
                        <div style="color: #ffffff;" class="items">商品数量</div>
                        <span>{{ room_info.roomItems }}+</span>
                    </div>
                    <div class="right_3">
                        <div style="color: #ffffff;" class="total">成交总金额</div>
                        <span>{{ room_info.roomTotal }}万</span>
                    </div>


                </div>
            </div>
        </div>
        <div class="one_box">
            <div class="store-container">
                <main>
                    <div class="product-grid">
                        <div v-for="product in products" :key="product.itemID" class="product-card">
                            <img :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${product.itemImg}.jpg`"
                                :alt="product.name" />
                            <div class="product-info">
                                <h2>{{ product.itemName }}</h2>
                                <p>¥{{ product.itemPrice }}</p>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <div style="height: 11vh;background-color: #E8E8E8;"></div>
    <Footer></Footer>
</template>
<script setup>
import Footer from '@/component/Footer.vue'
import { Calendar, Search } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import router from '../../router/index.js'
import { ref, computed } from 'vue'
import request from '../../utils/request';
import { reactive } from "vue";
import { ElNotification } from 'element-plus'

const products = ref([])
const room_info = ref([])

const searchQuery = ref('')
const currentPage = ref(1)
const itemsPerPage = 8

onMounted(async () => {

    const route = useRoute();
    const roomId = route.params.roomId;

    request.get(`/farmer/selectItemPage/${roomId}`).then(res => {
        products.value = res.data.list
        console.log(products.value);
    })

    request.get(`/farmer/selectRoomById/${roomId}`).then(res => {
        console.log("我是店铺");
        room_info.value = res.data;
        console.log(room_info.value);
    }).catch(error => {
        console.error('请求失败:', error);
    })
})


</script>
<style scoped>
.top_bar {
    width: 100%;
    height: 10vh;
    /* background-color: wheat; */
    display: flex;
}

.top_bar img {
    width: 20vh;
    height: auto;
    margin-left: 20vh;
}


.top_bar .search {
    width: 50vh;
    margin: auto;
    margin-left: 0vh;
    display: flex;
}

.search .search_btn_v {
    background-color: green;
    font-size: 1.8vh;
    font-weight: bold;
}


.body {
    display: flex;
    flex-wrap: wrap;
    background-color: #E8E8E8;
}

.room_info {
    background-color: #45a049;
    margin: auto;
    width: 80%;
    height: auto;
    display: flex;
}

.farm_card {
    width: 80vh;
    margin-right: 65vh;
    margin-top: 2.5vh;
    display: flex;
}

.card_left {
    width: 25vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card_left span {
    margin-top: 2vh;
}

.card_left .card_tags {
    margin: 0;
}

.card_right {
    display: flex;
    gap: 2vh;
    margin-top: 2vh;
}

.card_right span {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(255, 56, 56);
}


.select_bar {
    background-color: green;
    color: white;
    width: 80%;
    margin: auto;
}

.one_box {
    background-color: white;
    width: 80%;
    height: auto;
    margin: auto;
}





.store-container {
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    margin-bottom: 20px;
}

h1 {
    margin: 0;
    color: #333;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 15px;
}

.product-info h2 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.product-info p {
    margin: 0 0 15px;
    color: #666;
}

.product-info button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-info button:hover {
    background-color: #45a049;
}
</style>